<template>
  <div>
    <a-form @submit="handleSubmit" :form="form">
      <a-card title="账号信息" :bordered="false">
        <a-form-item
          label="代理名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            v-decorator="['name', {rules: [{ required: true, message: '请填写代理名称' }],initialValue: this.info.name}]"
            placeholder="请填写代理名称"/>
        </a-form-item>
        <a-form-item
          label="手机号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="手机号即登录账号"
            :disabled="state.isEdit"
            v-decorator="['phone',{
              rules: [
                { required: true, message: '请填写手机号' },
                { pattern: '^(0|86|17951)?(1[0-9]{2})[0-9]{8}$', message: '请正确填写联系方式' }
              ],
              initialValue: this.info.phone
            }]"/>
        </a-form-item>
        <a-form-item
          label="登录密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :extra="state.isEdit ? '如需修改密码则填写' : ''"
        >
          <a-input-password
            placeholder="请输入登录密码"
            v-decorator="['password',{rules: [{ required: !state.isEdit, message: '请输入登录密码' }]}]"
          />
        </a-form-item>
        <a-form-item
          label="代理等级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select
            v-decorator="['level',{initialValue: this.info.hasOwnProperty('level') ? this.info.level : 1}]">
            <a-select-option :value="1">群主</a-select-option>
            <a-select-option :value="2">精英</a-select-option>
            <a-select-option :value="3">大咖</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="所属合伙人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <partner-selection
            :disabled="state.isEdit && info.partner_identity !== null"
            v-decorator="['affiliated_partner', { initialValue: (this.info.affiliated_partner && [this.info.affiliated_partner.id]) || null }]"
          />
        </a-form-item>
        <a-form-item
          label="代理标签"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <agent-label-selection
            v-decorator="['labels', { initialValue: this.info.hasOwnProperty('labels') ? this.info.labels.map(label => label.id) : [] }]"
          />
        </a-form-item>
        <a-form-item
          label="培养奖"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group
            v-decorator="['cultivation_award', {initialValue: this.info.hasOwnProperty('cultivation_award') ? this.info.cultivation_award : 1}]">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="2">关闭</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-card>

      <a-card title="身份信息" :bordered="false">
        <a-form-item
          label="代理姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            v-decorator="['real_name', { initialValue: this.info.real_name }]"
            placeholder="请填写代理姓名"/>
        </a-form-item>
        <a-form-item
          label="代理性别"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group
            v-decorator="['gender',{initialValue: this.info.hasOwnProperty('gender') ? this.info.gender : 1}]">
            <a-radio :value="1">男</a-radio>
            <a-radio :value="2">女</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="微信"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            v-decorator="['wechat_number', { initialValue: this.info.wechat_number }]"
            placeholder="请填写微信号"/>
        </a-form-item>
        <a-form-item
          label="代理生日"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker
            v-decorator="['birthday', { initialValue: this.info.birthday || null }]"
          />
        </a-form-item>
        <a-form-item
          label="归属地"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-cascader
            expand-trigger="hover"
            :options="areaOptions"
            change-on-select
            allow-clear
            :show-search="true"
            placeholder=""
            v-decorator="['address_cascader',{initialValue: addressInitialValue,}]"
          />
        </a-form-item>
        <a-form-item
          label="收货地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="请填写收货地址"
            v-decorator="['address',{initialValue: this.info.hasOwnProperty('address') ? this.info.address : ''}]"
          />
        </a-form-item>

        <a-form-item
          :wrapperCol="{xs: { offset: 2 }}"
        >
          <a-button htmlType="submit" type="primary" :loading="state.submitButtonLoading">提交</a-button>
        </a-form-item>
      </a-card>
    </a-form>
  </div>
</template>

<script>
  import md5 from 'md5'
  import options from '@/utils/chinaDivision'
  import { getAgentInfo, saveAgent } from '@/api/agent'
  import AgentLabelSelection from '@/components/AgentLabelSelection/AgentLabelSelection'
  import PartnerSelection from '@/components/PartnerSelection/PartnerSelection'

  export default {
    name: 'BaseForm',
    components: { PartnerSelection, AgentLabelSelection },
    data () {
      return {
        areaOptions: options,
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 8 },
          sm: { span: 8 }
        },

        form: this.$form.createForm(this),
        addressInitialValue: [],
        info: {},

        state: {
          submitButtonLoading: false,
          isEdit: false
        }
      }
    },
    created () {
      if (this.$route.query.hasOwnProperty('id')) {
        this.state.isEdit = true
        getAgentInfo(this.$route.query.id).then(res => {
          this.info = res
          this.addressInitialValue = [
            (this.info.province && this.info.province.code) || null,
            (this.info.city && this.info.city.code) || null,
            (this.info.area && this.info.area.code) || null
          ]
        })
      }
    },
    methods: {
      sameWithReturnAddress () {
        this.form.setFieldsValue({
          'address_cascader': this.form.getFieldValue('return_address_cascader'),
          'address': this.form.getFieldValue('return_address')
        })
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (err !== null) {
            return false
          }

          values.password = values.password && md5(values.password)
          values.birthday = values.birthday && (typeof values.birthday === 'object') ? values.birthday.format('YYYY-MM-DD') : values.birthday;

          [values.province = 0, values.city = 0, values.area = 0] = values.address_cascader
          values.affiliated_partner = (values.affiliated_partner && values.affiliated_partner[0]) || null

          if (this.state.isEdit) {
            values.id = this.info.id
          }

          saveAgent(values)
            .then(res => {
              this.$router.push({ name: 'agent_list' })
            })
        })
      }
    }
  }
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }

  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
</style>
